import QuestionInput from "@/components/QuestionComponents/QuestionInput";
import QuestionRadio from "@/components/QuestionComponents/QuestionRadio";
import styles from '@/styles/question.module.scss'
import PageWrapper from "@/components/PageWrapper";
import getQuestionById from "@/services/question";
import { getComponent } from "@/components/QuestionComponents";
type PropsType = {
    errno: number;
    data?: {
        id: string;
        title: string;
        desc?: string;
        js?: string;
        css?: string;
        isPublished: boolean;
        isDeleted: boolean;
        componentList: Array<any>;
    };
    message?: string;
}

export default function About(props: PropsType) {
    const { errno, data , message='' } = props;
    const { id, title='', desc='', isDeleted, isPublished, componentList=[] } = data || {};

    if(errno !== 0){
        return (
        <PageWrapper title="错误" desc="这是错误页面">
                <h1>错误</h1>
                <p>{message}</p>
        </PageWrapper>
        )
    }

    if(isDeleted) {
        return (
        <PageWrapper title={title} desc={desc}>
            <h1>{title}</h1>
            <p>该问卷已经被删除</p>
        </PageWrapper>
        )
    }
    
    if(!isPublished){
        return (
            <PageWrapper title={title} desc={desc}>
                <h1>{title}</h1>
                <p>该问卷尚未发布</p>
            </PageWrapper>
            )
    }

    return (
        <PageWrapper title="问卷页面" desc="这是问卷页面">
            <form action="/api/answer" method="post">
                <input type="hidden" name="questionId" value={id} />
                {componentList.map((component) => {
                    const Component = getComponent(component);
                    return (<div key={component.fe_id} className={styles['component-wrapper']}>
                            {Component}
                    </div>);
                })}
                <div className={styles['submit-btn-container']}>
                    <input type="submit" value="提交"/>
                </div>
            </form>
       </PageWrapper>
    )
   
}


export async function getServerSideProps(context: any) {
    const {id=''} = context.params;
    const data = await getQuestionById(id);
    console.log(data);
    return {  
        props:data
    }
}
